﻿@{
    Layout = null;
    ViewData["Title"] = "IndexCheck";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>薪酬发放登记复核</h1>

<div id="app">
    @*第一部分*@
    <div v-if="flagHid==1">
        <el-table :data="salary_grants"
                  height="250"
                  stripe
                  border
                  style="width: 100%">
            <el-table-column prop="salary_grant_id"
                             label="薪酬发放编号"
                             width="180">
            </el-table-column>
            <el-table-column prop="first_kind_name"
                             label="I级机构名称"
                             width="150">
            </el-table-column>
            <el-table-column prop="second_kind_name"
                             label="II级机构名称"
                             width="150">
            </el-table-column>
            <el-table-column prop="third_kind_name"
                             label="III级机构名称"
                             width="150">
            </el-table-column>
            <el-table-column prop="human_amount"
                             label="人数"
                             width="150">
            </el-table-column>
            <el-table-column prop="salary_standard_sum"
                             label="基本薪酬总额(元)"
                             width="150">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini"
                               v-on:click="handleCheck(scope.row)">复核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="pgcurrent"
                       :page-sizes="[3, 6, 9, 12]"
                       :page-size="pgsize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="rows">
        </el-pagination>
    </div>
    @*第二部分*@
    <div v-if="flagHid==2">
        <el-row :gutter="20">
            <el-col :span="12">
                薪酬单编号:{{salary_grant.salary_grant_id}}
            </el-col>
            <el-col :span="5" :offset="7">
                <el-button type="primary" v-on:click="handleCheckSubmit()">复核通过</el-button>
                <el-button type="warning" v-on:click="handleFanhui" style="margin-left: 10px;">返回</el-button>
            </el-col>
        </el-row>
        <div style="margin: 25px 0;"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                本机构总人数:{{salary_grant.human_amount}},&nbsp;
                基本薪酬总数:{{salary_grant.salary_standard_sum}},&nbsp;
                实发总额:{{salary_grant.salary_paid_sum}}
            </el-col>
            <el-col :span="9" :offset="3">
                复核人:<el-input v-model="salary_grant.checker" placeholder="请输入内容" style="width:70px;margin-right:10px"></el-input>
                复核时间:{{salary_grant.check_time}}
            </el-col>
        </el-row>
        @*隔断开，设置上间距*@
        <div style="margin: 25px 0;"></div>
        <el-table :data="salary_grant_details"
                  style="width: 100%"
                  :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column prop="grd_id"
                             label="序号"
                             sortable
                             width="80">
            </el-table-column>
            <el-table-column prop="human_id"
                             label="档案编号"
                             sortable
                             width="150">
            </el-table-column>
            <el-table-column prop="human_name"
                             label="姓名"
                             sortable
                             width="110">
            </el-table-column>
            <el-table-column label="薪酬基本明细"
                             sortable
                             width="150">
                <template slot-scope="scope">
                    {{scope.row.salary_standard_sum}}&nbsp;&nbsp;
                    <el-button icon="el-icon-search" circle v-on:click="handleDetails(scope.row.human_id)"></el-button>
                </template>
            </el-table-column>
            <el-table-column prop="bouns_sum"
                             label="奖励金额"
                             sortable
                             width="140">
                @*数字文本框*@
                <template slot-scope="scope">
                    <el-input-number class="inputnum1" v-on:change="sumChange(scope.row)" v-model="scope.row.bouns_sum" :precision="2" :step="1" controls-position="right" :max="10000" size="small"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="sale_sum"
                             label="销售绩效总额"
                             sortable
                             width="140">
                @*数字文本框*@
                <template slot-scope="scope">
                    <el-input-number class="inputnum1" v-on:change="sumChange(scope.row)" v-model="scope.row.sale_sum" :precision="2" :step="1" controls-position="right" :max="10000" size="small"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="deduct_sum"
                             label="应扣金额"
                             sortable
                             width="140">
                @*数字文本框*@
                <template slot-scope="scope">
                    <el-input-number class="inputnum1" v-on:change="sumChange(scope.row)" v-model="scope.row.deduct_sum" :precision="2" :step="1" controls-position="right" :max="10000" size="small"></el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="salary_paid_sum"
                             label="实发金额"
                             sortable
                             width="110">
            </el-table-column>
        </el-table>
        @*薪酬基本明细的模态框*@
        <el-dialog title="薪酬标准明细："
                   :visible.sync="centerDialogVisible"
                   width="35%"
                   center>
            <el-table :data="salary_standard_details"
                      stripe
                      style="width: 100%">
                <el-table-column prop="item_name"
                                 label="薪酬项目名称"
                                 width="170">
                </el-table-column>
                <el-table-column prop="salary"
                                 label="薪酬金额"
                                 width="140">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button style="margin-left:250px" type="primary" v-on:click="centerDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //区域模块隐藏标记
            flagHid: 1,
            //表单的数据源
            salary_grants: [],
            //页面容量
            pgsize: 3,
            //页面下标
            pgcurrent: 1,
            //总数据行数
            rows: 0,
            //选中行的数据
            salary_grant: {},
            //根据薪酬发放简略表中的ID拿到的薪酬发放明细集合
            salary_grant_details: [],
            //明细模态框开关
            centerDialogVisible: false,
            //薪酬标准明细集合
            salary_standard_details:[],
        },
        methods: {
            //分页查询薪酬发放简略表未复核过的数据
            fillSalary_grants() {
                axios.get("/SalaryGrant/SalaryGrantPGFills?pgsize=" + this.pgsize + "&pgcurrent=" + this.pgcurrent).then(res => {
                    this.salary_grants = res.data.tabs;
                    this.rows = res.data.rows;
                })
            },
            //页面容量改变事件
            handleSizeChange(val) {
                this.pgsize = val;
                this.fillSalary_grants();
            },
            //翻页下标改变事件
            handleCurrentChange(val) {
                this.pgcurrent = val;
                this.fillSalary_grants();
            },
            //复核按钮的点击事件
            handleCheck(row) {
                console.info("handleCheck:row,", row);
                this.flagHid = 2;
                this.salary_grant = row;
                var userName = sessionStorage.getItem("userName");
                this.salary_grant.checker = userName;
                //根据薪酬发放ID查询其发放详情信息
                axios.get("/SalaryGrant/SalaryGrantDetailByIdFalse?salary_grant_id=" + row.salary_grant_id).then(res => {
                    this.salary_grant_details = res.data;
                })
            },
            //数字文本框金额值改变事件
            sumChange(row) {
                console.info("数字文本框值改变row", row);
                row.salary_paid_sum = row.salary_standard_sum + row.bouns_sum + row.sale_sum - row.deduct_sum;
                this.salary_grant.salary_paid_sum = 0;
                this.salary_grant.salary_standard_sum = 0;
                //上面的薪酬总额也要发生改变
                this.salary_grant_details.forEach((item) => {
                    this.salary_grant.salary_paid_sum += item.salary_paid_sum;
                    this.salary_grant.salary_standard_sum += item.salary_standard_sum;
                })
            },
            //复核通过按钮
            handleCheckSubmit() {
                //先将薪酬明细集合转json格式
                var strjson = JSON.stringify(this.salary_grant_details);
                //将显示在头上字符串形式的变更日期转换成日期类型,然后在进行传参注入
                var date = new Date(this.salary_grant.check_time);
                console.info("this.salary_grant", this.salary_grant);
                axios.post("/SalaryGrant/SalaryGrantCheck", {
                    sgr_id: this.salary_grant.sgr_id,
                    salary_grant_id: this.salary_grant.salary_grant_id,
                    salary_standard_sum: this.salary_grant.salary_standard_sum,
                    salary_paid_sum: this.salary_grant.salary_paid_sum,
                    checker: this.salary_grant.checker,
                    check_time: date,
                    salary_grant_detailsJson: strjson,
                }).then((res) => {
                    this.$message({
                        message: '恭喜，成功完成复核操作！',
                        type: 'success'
                    });
                    //返回上一级并进行刷新
                    this.flagHid = 1;
                    this.fillSalary_grants();
                })
            },
            //返回按钮到第一部分
            handleFanhui() {
                this.flagHid = 1;
            },
            //薪酬基本明细按钮
            handleDetails(human_id) {
                axios.get("/SalaryStandard/SalaryStandardDetailsFindHmid?human_id=" + human_id).then(res => {
                    this.centerDialogVisible = !this.centerDialogVisible;
                    this.salary_standard_details = res.data;
                    console.info("res:", res);
                })
            },
            //获取当前时间
            getNowTime() {
                var now = new Date();
                var year = now.getFullYear(); //获取年
                var month = now.getMonth();//获取月
                var date = now.getDate();//获取日
                var hours = now.getHours();//获取小时
                var minutes = now.getMinutes();//获取分钟
                var seconds = now.getSeconds();//获取秒
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
                var defaultDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
                this.salary_grant.check_time = defaultDate;
            },
            //定义时间戳
            created() {
                setInterval(() => {
                    this.getNowTime();
                }, 500);
            },

        },
        //过滤器
        filters: {
            //时间过滤器
            formatDate(date) {
                const nDate = new Date(date)
                //将不满10的数字自动补0
                const year = nDate.getFullYear().toString().padStart(2, 0);
                const month = nDate.getMonth()+1;
                const day = nDate.getDate();
                return year + '年' + month + '月' + day + '日';
            }
        },
        mounted: function() {
            this.fillSalary_grants();
            this.created();
        }
    })
</script>
